<template>
  <div v-loading="isloading" class="empower-container">
    <div class="over-header">
      <div class="header"><i class="el-icon-d-arrow-right"></i>按条件筛选</div>
      <div class="search">
        <!-- <div class="zahungtai">
          <span style="width: 190px"
            ><i class="icon iconfont icon-w_cunzhuang"></i>关联村庄：</span
          >
          <el-input
            v-model="listquery.key"
            size="small"
            suffix-icon="el-icon-search"
            class="einput"
            clearable
            placeholder="请输入村庄名"
            @change="valueChange"
          />
        </div> -->
        <div class="zahungtai">
          <span style="width: 150px"
            ><i class="icon iconfont icon-danwei"></i>单位名称：</span
          >
          <el-input
            v-model="listquery.userName"
            size="small"
            suffix-icon="el-icon-search"
            class="einput"
            clearable
            placeholder="请输入单位名"
            @change="valueChange"
          />
        </div>
      </div>
    </div>
    <div class="tableheader">
      <div class="header">
        <i class="el-icon-d-arrow-right"></i>设备申请记录
      </div>
      <div>
        <el-button type="primary" @click="downloads" size="mini" plain
          ><i class="el-icon-download"></i>批量下载</el-button
        >
          <el-button type="primary" @click="shouquans" size="mini" plain
          ><i class="iconfont icon-tongguo"></i>批量授权</el-button
        >
      </div>
      <div class="table-tips">
        <span class="gundong"
          ><i class="el-icon-question"></i
          >如通过某设备使用授权，请上传授权码文件；如拒绝，请给出拒绝理由，方便编制单位知晓更正</span
        >
      </div>
    </div>

    <el-table
      :data="tableData"
      stripe
      border
      tooltip-effect="dark"
       @selection-change="handleSelectionChange"
      style="width: 100%"
      class="eltable"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" width="80" type="index" />
      <el-table-column prop="userName" label="申请单位名称" width="180" />
      <el-table-column prop="applyDate" label="申请时间" width="180" />

      <el-table-column label="设备信息">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="查看设备信息附件"
            placement="bottom"
          >
            <a
              :href="getShebeiUrl(scope.row.applyFiles)"
              :download="getShebeiUrl(scope.row.applyFiles)"
              ><i class="iconfont icon-shebei"></i
            ></a>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="中标合同" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.applyFiles.split(',').length > 1">
            <el-tooltip
              class="item"
              effect="dark"
              content="查看中标合同附件"
              placement="bottom"
            >
              <a
                :href="getHetongUrl(scope.row.applyFiles)"
                :download="getHetongUrl(scope.row.applyFiles)"
                ><i class="iconfont icon-hetong"></i
              ></a>
            </el-tooltip>
          </div>
          <div v-else>无</div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="责任人号码" width="200" />

      <el-table-column label="操作" width="230" fixed="right">
        　<template slot-scope="scope">
          <el-button
            type="success"
            plain
            size="mini"
            icon="iconfont icon-tongguo"
            @click="openPassDialog(scope.row)"
            >通过</el-button
          >
          <el-button
            type="danger"
            plain
            size="mini"
            icon="iconfont icon-jujue1"
            @click="openRefuseDialog(scope.row)"
            >拒绝</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="tableData.length > 0"
      class="elpagi"
      :total="total"
      @size-change="getdata"
      @current-change="getdata"
      @prev-click="getdata"
      @next-click="getdata"
      :current-page.sync="listquery.currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size.sync="listquery.pageSize"
      layout="total,sizes, prev, pager, next, jumper"
    />
    <el-dialog
      title="提示"
      :visible.sync="refuseDialog"
      width="30%"
      append-to-body
    >
      <span>请给编制单位给出拒绝理由，以便编制单位改进</span>
      <el-input
        v-model="reason"
        placeholder="请输入建议/拒绝理由"
        class="dialoginput"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseDialog = false">取 消</el-button>
        <el-button type="primary" @click="refuse(row)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="请上传授权文件"
      :visible.sync="empowerFileDialog"
      width="30%"
      append-to-body
    >
      <el-upload
        class="upload-demo"
        action=""
        :limit="1"
        :http-request="uploadFile"
        :show-file-list="true"
        list-type="text"
      >
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="empowerFileDialog = false">取 消</el-button>
        <el-button type="primary"   @click=" status=== 'dange' ? allow() : listallow()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 村庄列表弹出框 -->
    <el-dialog
      title="村庄列表"
      :visible.sync="changeDialogVisible"
      width="30%"
      append-to-body
    >
      <ul>
        <div class="allvilagestitle">已选村庄列表如下所示:</div>
        <li v-for="item in allvilages" :key="item">{{ item }}</li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import tableHeader from "../components/TableHeader";
import { setagreeNoList, changeapply, changeapplys } from "@/api/index.js";
import openMixin from "@/mixins/open.js";
import queryMixin from "@/mixins/countquery.js";

export default {
  components: {
    tableHeader,
  },

  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        userName: "",
        agreeType: 0,
      },
      isloading: false,
      name: "数据未授权表",
      reason: "",
      total: 0,
      status:"",
      changeDialogVisible: false,
      refuseDialog: false,
      empowerFileDialog: false,
      tableData: [],
      row: "",
      fileList: [],
      empowerFile: null,
      allvilages: [],
      multipleSelection: []
    };
  },
  mounted() {
    this.getdata();
  },
  mixins: [openMixin, queryMixin],

  methods: {
     
    downloadlist() {
      let query = {
        pageSize: 99999,
        currentPage: 1,
        city: this.listquery.city,
        country: this.listquery.country,
        key: this.listquery.key,
        agreeType: 0,
      };
     
      setagreeNoList(query).then((res) => {
        this.$refs.header.downloadExcel(res.content);
      });
    },
     
    uploadFile(data) {
      this.empowerFile = data.file;
    },
    allow() {
      if (!this.empowerFile) {
        this.$notify.error({
          title: "错误",
          message: "请上传授权材料",
        });
        return;
      }
      let row = this.row;
      var data = new FormData();
      data.append("file", this.empowerFile);
      data.append("id", row.id);
      data.append("message", "");
      data.append("agreeType", "1");
      changeapply(data)
        .then((v) => {
          if (v.success) {
            this.empowerFileDialog = false;
            this.getdata();
          } else {
            this.$notify.error({
              title: "上传错误",
              message: v.message,
            });
          }
        })
        .catch((e) => {
           this.$message.error(e.response.data.message);
        });
    },
    openPassDialog(row) {
      this.row = row;
        this.status = "dange"
      this.empowerFileDialog = true;
    
    },
    openRefuseDialog(row) {
      this.row = row;
      this.refuseDialog = true;
    },
    shouquans(){
      if(this.multipleSelection.length==0){
            this.$notify.error({
                title: "错误",
                message: "请至少选择一条记录",
              });
         }else{
            this.status = "multi"       
              this.empowerFileDialog = true;
         }
    },
    listallow(){
  if (!this.empowerFile) {
        this.$notify.error({
          title: "错误",
          message: "请上传授权材料",
        });
        return;
      }
      var data = new FormData();
      let listids = []
      this.multipleSelection.forEach(element => {
        listids.push(element.id)
      });
      data.append("file", this.empowerFile);
      data.append("ids", listids);
      data.append("message", "");
      data.append("agreeType", "1");
      changeapplys(data)
        .then((v) => {
          if (v.success) {
            this.empowerFileDialog = false;
            this.getdata();
          } else {
            this.$notify.error({
              title: "上传错误",
              message: v.message,
            });
          }
        })
        .catch((e) => {
           this.$message.error(e.response.data.message);
        });
    },

    refuse() {
      let row = this.row;
      let data = new FormData();
      data.append("id", row.id);
      data.append("message", this.reason);
      data.append("agreeType", "-1");
      changeapply(data).then((v) => {
        if (v.success) {
          this.$notify({
            title: "成功",
            message: "已拒绝",
            type: "success",
          });
          this.getdata();
          this.refuseDialog = false;
        } else {
          this.$notify.error({
            title: "错误",
            message: v.message,
          });
        }
      });
    },

    openmore(villages) {
      this.changeDialogVisible = true;
      this.allvilages = villages;
    },
    async getdata() {
      let res = await setagreeNoList(this.listquery);
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../public/css/table.scss";
ul {
  margin: 0;
  padding: 5px;
  list-style: none;
  border: 1px dashed #ccc;
  height: 250px;
  overflow-y: auto;
  li {
    line-height: 25px;
  }
}
.allvilagestitle {
  line-height: 35px;
  color: #4778c7;
}
.empower-container {
  padding: 5px;
  height: 100%;
  overflow: auto;
}

.header {
  line-height: 35px;
  margin-right: 5px;

  i {
    color: #4778c7;
  }
}
.more {
  color: #4cc8c7;
  margin-left: 10px;
  &:hover {
    color: orange;
  }
}
.tableheader {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .table-tips {
    margin-right: 10px;
    width: 380px;
    overflow: hidden;
    padding-left: 10px;

    .gundong {
      padding-left: 20px;
      font-size: 12px;
      color: red;
      display: inline-block;
      white-space: nowrap;
      animation: 8s wordsLoop linear infinite normal;
      display: flex;
      align-items: center;
    }

    @keyframes wordsLoop {
      0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }

      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }

    @-webkit-keyframes wordsLoop {
      0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }

      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }

    i {
      font-size: 18px;
    }
  }
}

.over-header {
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;

  .header {
    border-bottom: 1px dashed #ccc;
  }

  .search {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
  }

  .zahungtai {
    display: flex;
    align-items: center;
    i {
      font-size: 18px;
      margin-right: 5px;
      color: #4cc8c7;
    }
  }
}

.downButton {
  background-color: #4778c7;
  color: #fff;
  border-radius: 5px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  padding: 0px 15px;
  letter-spacing: 1px;
}

.green {
  background-color: #3cb371;
}

.gray {
  background-color: #cdc5bf;
}

.dialoginput {
  margin-top: 15px;
}
</style>